<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">

	<title>Avatar</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta charset="utf-8">


	<script src="%VITE_BUNDLE_PATH%" type="module"></script>


	<script>// delete Document.prototype.adoptedStyleSheets;</script>

	<link rel="stylesheet" type="text/css" href="./styles/Avatar.css">
</head>

<body class="avatar1auto">
	<section>
		<h3>Avatar - Basic sample</h3>
		<ui5-avatar>
			<img src="./img/John_Miller.png" alt="John Miller">
		</ui5-avatar>
	</section>

	<section>
		<h3>Avatar - special characters in image path</h3>
		<ui5-avatar class="avatar2auto">
			<img src="./img/John$$$ ' (_)Miller 100%25 &=.png" alt="John Miller">
		</ui5-avatar>
		<ui5-avatar class="avatar2auto">
			<img src="./img/John Miller.png" alt="John Miller">
		</ui5-avatar>
		<ui5-avatar class="avatar2auto">
			<img src="./img/John%20Miller.png" alt="John Miller">
		</ui5-avatar>
		<ui5-avatar class="avatar2auto">
			<img src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" alt="SAP Logo">
		</ui5-avatar>
	</section>

	<section>
		<h3>Avatar - Square [ XS, S, M, L, XL ]</h3>
		<ui5-avatar shape="Square" size="XS">
			<img src="./img/woman_avatar_5.png" alt="Woman image">
		</ui5-avatar>
		<ui5-avatar shape="Square" size="S">
			<img src="./img/woman_avatar_5.png" alt="Woman image">
		</ui5-avatar>
		<ui5-avatar shape="Square" size="M">
			<img src="./img/woman_avatar_5.png" alt="Woman image">
		</ui5-avatar>
		<ui5-avatar shape="Square" size="L">
			<img src="./img/woman_avatar_5.png" alt="Woman image">
		</ui5-avatar>
		<ui5-avatar shape="Square" size="XL">
			<img src="./img/woman_avatar_5.png" alt="Woman image">
		</ui5-avatar>
	</section>

	<section>
		<h3>Avatar - Circle [ XS, S, M, L, XL ]</h3>
		<ui5-avatar size="XS">
			<img src="./img/John_Miller.png" alt="John Miller">
		</ui5-avatar>
		<ui5-avatar size="S">
			<img src="./img/John_Miller.png" alt="John Miller">
		</ui5-avatar>
		<ui5-avatar size="M">
			<img src="./img/John_Miller.png" alt="John Miller">
		</ui5-avatar>
		<ui5-avatar size="L">
			<img src="./img/John_Miller.png" alt="John Miller">
		</ui5-avatar>
		<ui5-avatar size="XL">
			<img src="./img/John_Miller.png" alt="John Miller">
		</ui5-avatar>
	</section>

	<section>
		<h3>Avatar - UI5 Icons</h3>
		<ui5-avatar icon="filter" size="XS"></ui5-avatar>
		<ui5-avatar icon="employee" size="S"></ui5-avatar>
		<ui5-avatar icon="product" size="M"></ui5-avatar>
		<ui5-avatar icon="supplier" size="L"></ui5-avatar>
		<ui5-avatar icon="shipping-status" size="XL"></ui5-avatar>
	</section>

	<section>
		<h3>Avatar - UI5 Icons</h3>
		<ui5-avatar icon="filter" shape="Square" size="XS"></ui5-avatar>
		<ui5-avatar icon="employee" shape="Square" size="S"></ui5-avatar>
		<ui5-avatar icon="product" shape="Square" size="M"></ui5-avatar>
		<ui5-avatar icon="supplier" shape="Square" size="L"></ui5-avatar>
		<ui5-avatar icon="shipping-status" shape="Square" size="XL"></ui5-avatar>
	</section>

	<section>
		<h3>Avatar - Background colors [ Accent1, Accent2, Accent3, Accent4, Accent5, Accent6, Accent7, Accent8, Accent9, Accent10, Placeholder ]</h3>
		<ui5-avatar color-scheme="Accent1" size="L"></ui5-avatar>
		<ui5-avatar color-scheme="Accent2" size="L"></ui5-avatar>
		<ui5-avatar color-scheme="Accent3" size="L"></ui5-avatar>
		<ui5-avatar color-scheme="Accent4" size="L"></ui5-avatar>
		<ui5-avatar color-scheme="Accent5" size="L"></ui5-avatar>
		<ui5-avatar size="L"></ui5-avatar>
		<ui5-avatar color-scheme="Accent7" size="L"></ui5-avatar>
		<ui5-avatar color-scheme="Accent8" size="L"></ui5-avatar>
		<ui5-avatar color-scheme="Accent9" size="L"></ui5-avatar>
		<ui5-avatar color-scheme="Accent10" size="L"></ui5-avatar>
		<ui5-avatar color-scheme="Placeholder" size="L"></ui5-avatar>
	</section>

	<section>
		<h3>Avatar - Initials</h3>
		<ui5-avatar initials="XS" color-scheme="Accent1" size="XS"></ui5-avatar>
		<ui5-avatar initials="S" color-scheme="Accent2" size="S"></ui5-avatar>
		<ui5-avatar initials="M" color-scheme="Accent3" size="M"></ui5-avatar>
		<ui5-avatar initials="L" color-scheme="Accent4" size="L"></ui5-avatar>
		<ui5-avatar initials="XL" color-scheme="Accent5" size="XL"></ui5-avatar>
		<ui5-avatar initials="XS" shape="Square" size="XS"></ui5-avatar>
		<ui5-avatar initials="S" color-scheme="Accent7" shape="Square" size="S"></ui5-avatar>
		<ui5-avatar initials="M" color-scheme="Accent8" shape="Square" size="M"></ui5-avatar>
		<ui5-avatar initials="L" color-scheme="Accent9" shape="Square" size="L"></ui5-avatar>
		<ui5-avatar initials="XL" color-scheme="Accent10" shape="Square" size="XL"></ui5-avatar>
	</section>

	<section>
		<h3>Avatar - Custom</h3>
		<h4>Avatar with custom size</h4>
		<ui5-avatar id="myCustomAvatar" shape="Square" size="XL" class="avatar3auto">
			<img src="./img/Lamp_avatar_01.jpg" alt="Lamp" class="avatar4auto">
		</ui5-avatar>
		<h4>Avatar with custom size and imageFitType="Contain"</h4>
		<ui5-avatar id="myCustomAvatar1" shape="Square" size="XL" class="avatar3auto">
			<img src="./img/Lamp_avatar_01.jpg" alt="Lamp" class="avatar5auto">
		</ui5-avatar>
	</section>

	<section>
		<h3>Avatar - test</h3>

		<div class="section">
			<ui5-avatar id="myAvatar1">
				<img src="./img/woman_avatar_5.png" alt="Woman image">
			</ui5-avatar>
			<ui5-avatar id="myAvatar2" icon="filter"></ui5-avatar>
			<ui5-avatar id="myAvatar3" icon="filter" initials="SF">
				<img src="./img/woman_avatar_5.png" alt="Woman image">
			</ui5-avatar>
			<ui5-avatar id="myAvatar4" initials="SF" shape="Square" size="M"></ui5-avatar>
			<ui5-avatar id="myAvatar5" initials="WWW" shape="Square" size="M"></ui5-avatar>
			<ui5-avatar id="myAvatar7" fallback-icon="alert" initials="WWW" shape="Circle" size="L"></ui5-avatar>
		</div>
	</section>

	<section>
		<h3>Avatar - interactive disabled</h3>
		<ui5-avatar id="interactive-disabled" disabled interactive initials="XS" size="XS" accessible-name="Interactive avatar"></ui5-avatar>
		<br>
		<ui5-input id="click-event-3"></ui5-input>
		<h3>Avatar - non-interactive disabled</h3>
		<ui5-avatar id="non-interactive-disabled" disabled initials="S" size="S"></ui5-avatar>
	</section>

	<section>
		<h3>Avatar - interactive</h3>
		<ui5-avatar id="interactive-avatar" interactive initials="XS" size="XS" accessible-name="Interactive avatar"></ui5-avatar>
		<ui5-avatar id="non-interactive-avatar" initials="S" size="S"></ui5-avatar>
		<ui5-input id="click-event" value="0"></ui5-input>

		<br>
		<ui5-avatar id="myInteractiveAvatar" interactive initials="L" size="L"></ui5-avatar>
		<ui5-input id="click-event-2"></ui5-input>
	</section>

	<section>
		<h3>Avatar - Visual affordance</h3>

		<div class="section">
			<ui5-avatar initials="AB" color-scheme="Accent1">
				<ui5-tag slot="badge">
					<ui5-icon slot="icon" name="accelerated"></ui5-icon>
				</ui5-tag>
			</ui5-avatar>

			<ui5-avatar interactive size="L" initials="CD" color-scheme="Accent2">
				<ui5-tag slot="badge">
					<ui5-icon slot="icon" name="accept"></ui5-icon>
				</ui5-tag>
			</ui5-avatar>

			<ui5-avatar size="XL">
				<img src="./img/John_Miller.png" alt="John Miller">
				<ui5-tag slot="badge">
					<ui5-icon slot="icon" name="bar-chart"></ui5-icon>
				</ui5-tag>
			</ui5-avatar>
		</div>

		<div class="section">
			<ui5-avatar shape="Square" size="XS" initials="EF" color-scheme="Accent3">
				<ui5-tag slot="badge">
					<ui5-icon slot="icon" name="filter"></ui5-icon>
				</ui5-tag>
			</ui5-avatar>

			<ui5-avatar interactive shape="Square" initials="GH" color-scheme="Accent4">
				<ui5-tag slot="badge">
					<ui5-icon slot="icon" name="add-employee"></ui5-icon>
				</ui5-tag>
			</ui5-avatar>

			<ui5-avatar shape="Square" size="L">
				<img src="./img/John_Miller.png" alt="John Miller">
				<ui5-tag slot="badge">
					<ui5-icon slot="icon" name="document"></ui5-icon>
				</ui5-tag>
			</ui5-avatar>
		</div>
	</section>

	<section>
		<h3>Avatar - Custom visual affordance</h3>
		<ui5-avatar initials="AB" color-scheme="Accent1">
			<span slot="badge" class="custom-badge">1</span>
		</ui5-avatar>
		<br><br>
	</section>

	<script>
		var avatar = document.getElementById("interactive-avatar"),
			interactiveDisabled = document.getElementById("interactive-disabled"),
			myInteractiveAvatar = document.getElementById("myInteractiveAvatar"),
			nonInteractiveAvatar = document.getElementById("non-interactive-avatar"),
			input = document.getElementById("click-event"),
			input2 = document.getElementById("click-event-2"),
			input3 = document.getElementById("click-event-3"),
			inputValue = 0;
			inputValue2 = 0;
			inputValue3 = 0;

		avatar.accessibilityAttributes = { hasPopup: "menu" };
		avatar.addEventListener("ui5-click", function() {
			input.value = `${++inputValue}`;
		});


		interactiveDisabled.accessibilityAttributes = { hasPopup: "menu" };
		interactiveDisabled.addEventListener("ui5-click", function() {
			input3.value = `${++inputValue3}`;
		});

		nonInteractiveAvatar.addEventListener("ui5-click", function() {
			input.value = `${++inputValue}`;
		});

		myInteractiveAvatar.accessibilityAttributes = { hasPopup: "menu" };
		myInteractiveAvatar.addEventListener("ui5-click", function() {
			input2.value = `${++inputValue2}`;
		});
	</script>

	<link rel="stylesheet" type="text/css" href="./styles/Avatar.css">

	<ui5-avatar size="XL" shape="Circle">
		<img src="./img/Lamp_avatar_01.jpg" alt="Woman 1" class="avatar-image">
	</ui5-avatar>

	<ui5-avatar size="XL" shape="Square">
		<img src="./img/Lamp_avatar_01.jpg" alt="Woman 1" class="avatar-image1">
	</ui5-avatar>

	<section>
		<h3>Avatar with three initials</h3>
		<ui5-avatar id="myAvatar6" initials="ÌÒÙ" color-scheme="Accent1"></ui5-avatar>
		<ui5-avatar initials="ABC" color-scheme="Accent2" size="XL"></ui5-avatar>

		<h3>Avatar with three overflowing initials - default fallback icon should be shown</h3>
		<ui5-avatar initials="WWW" color-scheme="Accent1" size="XS"></ui5-avatar>

		<h3>Avatar with three overflowing initials - custom fallback icon should be shown</h3>
		<ui5-avatar initials="WWW" fallback-icon="alert" color-scheme="Accent2" size="XL"></ui5-avatar>

	</section>


</body>
</html>
